<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
      </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
  </table>
  <script>
    // 创建元素来写表格
    var list = [
      {
        "title": "笔",
        "price": 2,
        "num": 2
      },
      {
        "title": "本",
        "price": 1,
        "num": 3
      },
      {
        "title": "尺子",
        "price": 3,
        "num": 1
      }
    ]
    var tbody = document.querySelector('#tbody')
    list.forEach(function (shop) {
      var tr = document.createElement('tr')
      for (var key in shop) {
        var td = document.createElement('td')
        td.innerHTML = shop[key]
        // 把td放入tr
        tr.appendChild(td)
      }
      // 一行创建结束了，放入tbody里
      tbody.appendChild(tr)
    })
    // 作业就在此基础上扩展：
    // 1、是否上架
    // 2、每一行小计加上
    // 3、计算商品总价
    // 4、计算上架商品的总价

    // 基础比较好的同学还可以做：
    // 创建改成文档碎片
    

  </script>
</body>
</html>